<template>
  <div class="container">
    <div style="padding: 0 0 20px 20px">
      <el-button @click="backPage">{{ $t("orderDetails.toBack") }}</el-button>
    </div>
    <template
      v-if="
        form.orderStatus &&
        (form.orderStatus.label == 'Reviewing' ||
          form.orderStatus.label == 'Unpay')
      "
    >
      <div class="title">{{ $t("orderDetails.title0") }}</div>
      <div class="content">
        <el-table :data="productData" tooltip-effect="dark" style="width: 40%">
          <el-table-column
            prop="productImage"
            :label="$t('orderDetails.product.productImage')"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 171px; height: 109px"
                :src="scope.row.productImage"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="productStatus"
            :label="$t('orderDetails.product.productStatus')"
          />
        </el-table>
      </div>
    </template>

    <div class="title">{{ $t("orderDetails.title1") }}</div>
    <div class="content">
      <el-table :data="tableData" tooltip-effect="dark" style="width: 100%">
        <el-table-column prop="orderTime" :label="$t('orderTable.orderTime')">
          <template slot-scope="scope">{{
            timeWord(scope.row.orderTime)
          }}</template>
        </el-table-column>
        <el-table-column
          prop="orderNumber"
          :label="$t('orderTable.orderNumber')"
        />
        <el-table-column
          prop="orderStatus"
          :label="$t('orderTable.orderStatus')"
        >
          <template slot-scope="scope">{{
            scope.row.orderStatus.label
          }}</template>
        </el-table-column>
        <el-table-column
          prop="grandTotal"
          :label="$t('orderTable.grandTotal')"
        />
      </el-table>
    </div>
    <div class="title">{{ $t("orderDetails.title2") }}</div>
    <div class="content">
      <el-table :data="productData" tooltip-effect="dark" style="width: 100%">
        <el-table-column
          prop="productName"
          :label="$t('orderDetails.product.productName')"
        />
        <el-table-column
          prop="price"
          :label="$t('orderDetails.product.price')"
        />
        <el-table-column
          prop="quantity"
          :label="$t('orderDetails.product.quantity')"
        />
      </el-table>
    </div>
    <div class="title">{{ $t("orderDetails.title3") }}</div>
    <div class="content">
      <el-table :data="paymentData" tooltip-effect="dark" style="width: 100%">
        <el-table-column
          prop="paymentTime"
          :label="$t('orderDetails.payment.paymentTime')"
        />
        <el-table-column
          prop="paymentNumber"
          :label="$t('orderDetails.payment.paymentNumber')"
        />
        <el-table-column
          prop="paymentChannel"
          :label="$t('orderDetails.payment.paymentChannel')"
        />
        <el-table-column
          prop="paymentPrice"
          :label="$t('orderDetails.payment.paymentPrice')"
        />
        <el-table-column
          prop="refundTime"
          :label="$t('orderDetails.payment.refundTime')"
        />
        <el-table-column
          prop="refundNumber"
          :label="$t('orderDetails.payment.refundNumber')"
        />
        <el-table-column
          prop="refundStatus"
          :label="$t('orderDetails.payment.refundStatus')"
        />
      </el-table>
    </div>
    <template v-if="form.orderStatus && form.orderStatus.label == 'Shipped'">
      <div class="title">{{ $t("orderDetails.title4") }}</div>
      <div class="content">
        <el-table
          :data="deliveryData"
          tooltip-effect="dark"
          style="width: 100%"
        >
          <el-table-column
            width="180px"
            prop="purchaserName"
            :label="$t('orderDetails.delivery.purchaserName')"
          />
          <el-table-column
            width="200"
            prop="purchaserPhoneNumber"
            :label="$t('orderDetails.delivery.purchaserPhoneNumber')"
          />
          <el-table-column
            width="180px"
            prop="code"
            :label="$t('orderDetails.delivery.code')"
          />
          <el-table-column
            prop="address"
            :label="$t('orderDetails.delivery.address')"
          />
          <el-table-column
            width="150px"
            prop="logistics"
            :label="$t('orderDetails.delivery.logistics')"
          />
          <el-table-column
            prop="number"
            :label="$t('orderDetails.delivery.number')"
          >
            <template slot-scope="scope"
              ><span style="color: #0081f4">{{
                scope.row.number
              }}</span></template
            >
          </el-table-column>
        </el-table>
      </div>
    </template>
  </div>
</template>
<script>
import { getOrderById } from "@/api/order";
export default {
  data() {
    return {
      id: null,
      form: {},
      tableData: [
        {
          grandTotal: "$100.00",
          id: 0,
          orderNumber: 237827492001,
          orderStatus: { value: "2", label: "Reviewing" },
          orderTime: "10:00:00 5-4-2021",
          productName: "DIY Card",
          quantity: "$100.00  ×1",
        },
      ],
      productData: [
        {
          productImage: require("../../assets/order/u1217.svg"),
          productName: "DIY card",
          price: "$10.00",
          quantity: "1",
          productStatus: "Reviewing",
        },
      ],
      paymentData: [
        {
          paymentTime: this.timeWord(),
          paymentNumber: "23782749200162376",
          paymentChannel: "PayPal",
          paymentPrice: "$ 18.00",
          refundTime: "——",
          refundNumber: "——",
          refundStatus: "——",
        },
      ],
      deliveryData: [
        {
          purchaserName: "First name.last name",
          purchaserPhoneNumber: "+49 63742803",
          code: "234545",
          address: "zhuo ming building Tallahassee Florida United state",
          logistics: "DHL",
          number: "23782749200162376",
        },
      ],
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.init();
  },
  methods: {
    backPage() {
      this.$router.push("/orderManagement/list");
    },
    async init() {
      const res = await getOrderById({ id: this.id });
      this.form = res.data;
      this.tableData[0].orderTime = this.form.orderTime;
      this.tableData[0].orderNumber = this.form.orderNumber;
      this.tableData[0].orderStatus = this.form.orderStatus;

      this.tableData[0].grandTotal = this.form.grandTotal;
      this.productData[0].price = this.form.grandTotal;
      this.paymentData[0].paymentPrice = this.form.grandTotal;

      console.log("this.form===", this.form);
      this.productData[0].productName = this.form.productName;
      this.productData[0].productStatus = this.form.orderStatus.label;
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  padding: 20px 0;
}
.title {
  background-color: rgba(248, 248, 248, 1);
  width: 100%;
  font-size: 24px;
  padding: 8px 20px;
}
.content {
  padding: 20px;
}
</style>
